@import './common';

.swiper-wrap{
	position: relative;
	height: setSize(420);

	.swiper{
		width: 100%;
		height: 100%;

		.swiper-item{
			width: 100%;
			height: 100%;

			.img{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}

	.page-num{
		position:absolute;
		right: setSize(32);
		bottom: setSize(23);
		z-index: 1;
		height:setSize(37);
		line-height:setSize(37);
		font-size:setSize(26);
		font-weight:400;
		color: #ccc;
	}

	.swiper-icons{
		position:absolute;
		right: setSize(32);
		bottom: setSize(23);
		z-index: 1;
		box-sizing: border-box;
		padding:0 setSize(10);
		background:#000;
		border-radius:setSize(100);
		opacity:0.6;

		.icons-wrap{
			box-sizing: border-box;
			padding:setSize(6);

			.icon-box{
				width: setSize(24);
				height: setSize(24);

				.icon{
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.icon-text{
				margin-left: setSize(6);
				font-size:setSize(20);
				font-weight:400;
				color:#fff;
			}
		}

		.line-box{
			box-sizing: border-box;
			padding:setSize(6) 0;

			.line{
				width: setSize(2);
				height:setSize(20);
				background:#FFF;
				opacity:0.5;
			}
		}
	}
}

.section{
	box-sizing:border-box;
	padding: 0 setSize(24) setSize(20);
	margin-bottom: setSize(24);
	// background-color:#fff;

	.title-box{
		box-sizing:border-box;
		padding:setSize(32) 0;

		.title{
			line-height:setSize(40);
			font-size:setSize(40);
			font-weight:500;
			// color:rgba(51,51,51,1);
		}

		.tags{
			margin-top: setSize(8);

			.tag{
				line-height:setSize(22);
				padding:setSize(10) setSize(20);
				margin-right: setSize(20);
				margin-top: setSize(16);
				border-radius:setSize(4);
				border:setSize(1) solid $mainColor;
				font-size:setSize(22);
				font-weight:400;
				color:$mainColor;
			}
		}
	}

	.cell{
		box-sizing:border-box;
		padding: setSize(10) 0;
		// border-top:setSize(1) solid #DEDEDE;
		color:#858688;

		.img-wrap{

			.img-box{
				width: setSize(64);
				height: setSize(64);

				.img{
					display: block;
					width: 100%;
					height: 100%;
					border-radius:50%;
				}
			}
		}

		.icon-box{
			width: setSize(26);
			height: setSize(26);

			.icon{
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.text{
			box-sizing:border-box;
			padding:0 setSize(20);
			font-size:setSize(30);
			font-weight:400;
			@include ellipsis;
		}

		.addr-text{
			margin-top: setSize(-8);

			.distance{
				margin-top: setSize(10);
				font-size:setSize(22);
				font-weight:400;
			}

			.dis-btn{
				width:setSize(114);
				height:setSize(42);
				line-height: setSize(42);
				margin-top: setSize(10);
				border-radius:setSize(4);
				border:setSize(1) solid $mainColor;
				font-size:setSize(22);
				font-weight:400;
				color:$mainColor;
				text-align: center;
			}
		}

		.sub-text{
			font-size:setSize(24);
			font-weight:400;
		}

		.cell-icon{
			align-items:center;
			box-sizing:border-box; 	
			padding-right:setSize(10);
			margin-top: setSize(-6);

			.icon{
				width: setSize(20);
				height: setSize(20);		
				display: inline-block;
				box-sizing:border-box; 
				border-right: setSize(3) solid #DEDEDE; 
				border-top: setSize(3) solid #DEDEDE;   
				transform: rotate(45deg); 
			}
		}
	}
}

.article-box{
	box-sizing:border-box;
	padding:setSize(24) setSize(24) 0;
	margin-top: setSize(24);
	// background-color:#fff;

	.article{

		.cell{

			.icon-box{
				width: setSize(32);
				height: setSize(32);

				.icon{
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.text{
				box-sizing:border-box;
				padding:0 setSize(20) 0;
				font-size:setSize(30);
				font-weight:400;
				color:rgba(51,51,51,1);
				@include ellipsis;
			}
		}
	}

	.textarea{
		padding: setSize(24) 0;
		font-size:setSize(26);
		font-weight:400;
		color:rgba(133,134,136,1);
		line-height:setSize(37);
	}
}

.foot-wrap{
	height: setSize(96);

	.foot-box{
		position: fixed;
		left: 0;
		bottom:0;
		width: 100%;
		height: setSize(96);
		z-index: 999;
		text-align: center;
		overflow: hidden;
		background-color:#fff;
		box-shadow:0 setSize(3) setSize(21) 0 rgba(0, 0, 0, 0.35);

		.btn{
			position:relative;
			box-sizing:border-box;
			padding:0 setSize(24);
			color: #fff;
			font-size: setSize(32);
		}

		.share{
			line-height: setSize(100);
			background-color:#707173;
		}

		.buy{
			line-height: setSize(100);
			background-color:$mainColor;
		}
	}
}